import React, { Component } from 'react';
import context from '../../utils/context'
import {category} from '../../utils/api'
class TabLeft extends Component {
    constructor(props){
      super(props)
      this.state = {
        currentIndex:0,
        tabs:[],
       
      }
    } 
    handleClick(index){
        // console.log(this.state.tabs[index].id);
        context.emit('saveIndex',this.state.tabs[index].id)
        this.setState({
            currentIndex:index, 
            // id:this.state.tabs[index].id
        })
    } 
    componentDidMount(){
        //发请求渲染一级分类
        category().then((res)=>{
            // console.log(res.data.list);
            this.setState({
              tabs:res.data.list,
            },()=>{
                this.handleClick(0)
            })
        })
    }
      
    render() {
        return (
            <div className='tableft'>
                {
                    this.state.tabs.map((item,index)=>{
                        return (
                            <div
                            className={'btn ' + (this.state.currentIndex === index ? 'active' : '')}
                            onClick={()=>{this.handleClick(index)}}
                            key={index}
                            >{item.name}</div>
                        )
                    })
                }
            </div>
        );
    }
}

export default TabLeft;